<template>
  <div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        :label="$t('#')"
        prop="index"
        align="center"
        width="50"
      />
      <el-table-column label="字段备注" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldTxt"
              disabled
            /> </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="字段名称" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldName"
              disabled
            /> </el-form-item></template>
      </el-table-column>
      <el-table-column prop="dbDefaultVal" label="控件类型" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-select
              v-model="scope.row.queryShowType"
              placeholder="请选择"
              :disabled="scope.row.dbFieldName == 'id'"
              @change="chooseType(scope.row)"
            >
              <el-option
                v-for="item in queryPageOptions"
                :key="item.value"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="fieldGrid" label="数据来源" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-select v-if="typeDisabled(scope.row)" v-model="scope.row.dataSourceQuery" placeholder="请选择" :disabled="true">
              <el-option v-for="item in dataSourceOption" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
            <el-input v-else-if="scope.row.queryShowType === 'cascader_component'" v-model="topLd" :disabled="true" />
            <el-input v-else :disabled="true" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="dbDefaultVal" label="查询类型" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-select
              v-model="scope.row.queryMode"
              placeholder="请选择"
              :disabled="scope.row.dbFieldName == 'id' "
            >
              <el-option
                v-for="item in queryModeOption"
                :key="item.value"
                :label="item.title"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select> </el-form-item></template>
      </el-table-column>
      <el-table-column prop="dbPointLength" label="是否启用" width="80px" align="center">
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isQuery"
            :checked="scope.row.isQuery"
            :disabled="scope.row.dbFieldName == 'id'"
          />
        </template>
      </el-table-column>
      <el-table-column prop="dbLength" label="选择字典">
        <template slot="header">
          <span>选择字典</span>
          <el-tooltip class="item" effect="light" content="只支持【下拉框,多选下拉框】有默认值" placement="top-start">
            <i class="el-icon-info" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-form-item style="width:240px">
            <el-input
              v-if="scope.row.queryShowType === 'text'"
              v-model="scope.row.queryDictField"
              placeholder=""
              :disabled="scope.row.dbFieldName == 'id' || scope.row.queryShowType === 'text' "
            />
            <el-select
              v-else-if="(scope.row.queryShowType === 'list'
                || scope.row.queryShowType === 'choose') && (!scope.row.dataSourceQuery || scope.row.dataSourceQuery==='dict') "
              v-model="scope.row.queryDictField"
              clearable
              filterable
              :placeholder="$t('请选择')"
              style="width:240px"
            >
              <el-option
                v-for="dict in dictOptions"
                :key="dict.dictType"
                :label="$t(dict.dictName)"
                :value="dict.dictType"
              />
            </el-select>
            <el-select
              v-else-if="scope.row.dataSourceQuery==='source' "
              v-model="scope.row.queryDictField"
              clearable
              filterable
              :placeholder="$t('请选择')"
              style="width:240px"
            >
              <el-option v-for="item in dataSetOption" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <el-input
              v-else
              v-model="scope.row.queryDictField"
              placeholder=""
              disabled
            />
          </el-form-item>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
import {
  getDataSetList
} from '@/api/system/desform/onlineForm/onlCgformHead'

const queryPageOptions = [
    { title: '文本框', value: 'text' },
    { title: '下拉框', value: 'list' },
    { title: '多选框', value: 'choose' },
    { title: '日期', value: 'date' },
    { title: '时间', value: 'time' },
    { title: '用户', value: 'user' },
    { title: '部门', value: 'dept' },
    { title: '联动组件', value: 'cascader_component' }
  ]
 const queryModeOption = [
      { title: '模糊查询', value: 'single' },
      { title: '范围查询', value: 'group' },
      { title: '精确查询', value: 'accurate' }

  ]
const dataSourceOption = [{
  title: '字典',
  value: 'dict',
  disabled: false
},
  {
    title: '数据源',
    value: 'source',
    disabled: false
  }

]
export default {
   data() {
     return {
          i: 1,
          btnDis: true,
          multipleTable: [],
          tableData: [],
          queryPageOptions: queryPageOptions,
          queryModeOption: queryModeOption,
          dataSourceOption: dataSourceOption,
           // 字典信息
          dictOptions: [],
           // 数据源信息
          dataSetOption: [],
           // 提示
          topLd: '同页面属性相同'
     }
   },
  computed: {
    ...mapState('dbAbout', ['dbPropertyList', 'indexMemory', 'rowData'])

  },
   watch: {
    rowData: {
      handler() {
          // 同步字典属性
          if (this.rowData && (this.rowData.fieldShowType === 'list' || this.rowData.fieldShowType === 'choose' || this.rowData.fieldShowType === 'cascader_component')) {
                 this.tableData[this.rowData.index - 1].queryShowType = this.rowData.fieldShowType
                 this.tableData[this.rowData.index - 1].queryDictField = this.rowData.fieldDefaultValue
          } else if (this.rowData && (this.rowData.fieldShowType === 'date' || this.rowData.fieldShowType === 'time')) {
                 this.tableData[this.rowData.index - 1].queryShowType = this.rowData.fieldShowType
          }
      },
      deep: true
    },
    indexMemory: {
      handler() {
          const { newIndex, oldIndex } = this.indexMemory
          const currRow = this.tableData.splice(oldIndex, 1)[0]
          this.tableData.splice(newIndex, 0, currRow)
          let i = 1
          this.tableData.forEach(e => { e.index = i++ })
        }
     },
    dbPropertyList: {
     handler() {
          this.wrapperData()
    },
    deep: true
    }
  },
   created() {
       this.wrapperData()
        getDictOptionselect().then(response => {
      this.dictOptions = response.data
    })
     getDataSetList().then(res => {
       this.dataSetOption = res.data
     })
   },
   methods: {
   // 封装成这个表单需要的数据
     wrapperData() {
      this.tableData = []
      this.dbPropertyList.forEach(e => {
        const obj = {
           'index': (e.index),
           'dbFieldName': e.dbFieldName,
           'dbFieldTxt': e.dbFieldTxt,
           'queryShowType': e.queryShowType || 'text',
           'dataSourceQuery': e.dataSource,
           'queryMode': e.queryMode || 'single',
           'queryDictField': e.queryDictField,
           'queryDictText': e.queryDictText,
           'isQuery': e.dbFieldName === 'id' ? false : e.isReadOnly === undefined ? false : !(e.isQuery === 0)

        }
          this.tableData.push(obj)
        })
     },
     // 根据选择的不同控件  禁用不同模式的查询
     chooseType(data) {
      const val = data.queryShowType
       if (val === 'text' || val === 'image' || val === 'textarea' ||
          val === 'user' || val === 'dept'
       ) {
          data.queryDictField = ''
       }
     },
     typeDisabled(data) {
       const val = data.queryShowType
       if (val === 'list' || val === 'choose' || val === 'radio') {
         return true
       }
       return false
     }
  }
}
</script>

<style scoped>
.buttons {
  margin-bottom: 10px;
}
/* 修改行的最小高度 */
.dataForm .el-row .el-form-item {
  min-height: 0px;
}
</style>
